<template>
	<view class="about-container">
		<u-navbar :is-back="true" :custom-back="back" title="关于小知" :border-bottom="true"></u-navbar>
		
		<view class="about-content">
			<!-- Logo和App名称 -->
			<view class="app-info">
				<image class="app-logo" src="../../static/logo.png" mode="aspectFit" @error="onLogoError"></image>
				<text class="app-name">环球知旅</text>
				<text class="app-slogan">靠近大自然，领略趣旅行</text>
			</view>
			
			<!-- 版本信息 -->
			<view class="version-info">
				<text class="version-label">版本号</text>
				<text class="version-value">{{ appVersion }}</text>
			</view>
			
			<!-- 功能列表 -->
			<u-cell-group>
				<u-cell-item title="功能介绍" :arrow="true" @click="showFeatureModal = true"></u-cell-item>
				<u-cell-item title="用户协议" :arrow="true" @click="toProtocol('user')"></u-cell-item>
				<u-cell-item title="隐私政策" :arrow="true" @click="toProtocol('privacy')"></u-cell-item>
				<u-cell-item title="检查更新" :arrow="true" @click="checkUpdate"></u-cell-item>
			</u-cell-group>
			
			<!-- 联系方式 -->
			<view class="contact-info">
				<view class="contact-item">
					<u-icon name="phone" size="20" color="#909399"></u-icon>
					<text class="contact-text">客服电话：400-888-6666</text>
				</view>
				<view class="contact-item">
					<u-icon name="email" size="20" color="#909399"></u-icon>
					<text class="contact-text">客服邮箱：service@gotravel.com</text>
				</view>
			</view>
			
			<!-- 版权信息 -->
			<view class="copyright">
				<text class="copyright-text">© 2025 环球知旅</text>
				<text class="copyright-text">All Rights Reserved</text>
			</view>
		</view>
		
		<u-toast ref="uToast" />
		
		<!-- 功能介绍弹窗 -->
		<u-modal v-model="showFeatureModal" title="功能介绍" :show-cancel-button="false" @confirm="showFeatureModal = false">
			<view class="feature-content">
				<view class="feature-item">
					<text class="feature-title">• 智能推荐</text>
					<text class="feature-desc">基于您的位置和偏好，智能推荐热门景点和酒店</text>
				</view>
				<view class="feature-item">
					<text class="feature-title">• 多种登录方式</text>
					<text class="feature-desc">支持手机号、验证码、密码、微信、人脸识别等多种登录方式</text>
				</view>
				<view class="feature-item">
					<text class="feature-title">• 地图导航</text>
					<text class="feature-desc">精准定位，查看附近景点，一键导航</text>
				</view>
				<view class="feature-item">
					<text class="feature-title">• 在线预订</text>
					<text class="feature-desc">景区门票、酒店住宿在线预订，方便快捷</text>
				</view>
				<view class="feature-item">
					<text class="feature-title">• 用户评价</text>
					<text class="feature-desc">查看真实用户评价，帮助您做出更好的选择</text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
		data() {
		return {
			appVersion: '1.0.7', // 应用版本号
			showFeatureModal: false,
			logoError: false
		}
	},
	onLoad() {
		// 获取应用版本信息
		this.getAppVersion();
	},
	methods: {
		// 获取应用版本
		getAppVersion() {
			// #ifdef APP-PLUS
			// APP端获取版本号
			plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
				this.appVersion = widgetInfo.version || '1.0.7';
			});
			// #endif
			
			// #ifdef H5 || MP-WEIXIN
			// H5和小程序使用manifest.json中的版本号
			// 可以从系统信息获取
			try {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo.appVersion) {
					this.appVersion = systemInfo.appVersion;
				}
			} catch (e) {
				console.log('获取版本信息失败', e);
			}
			// #endif
		},
		
		// 查看协议
		toProtocol(type) {
			if (type === 'user') {
				// 跳转到用户协议页面
				uni.navigateTo({
					url: '/pages/login/protocol?type=user'
				});
			} else if (type === 'privacy') {
				// 跳转到隐私政策页面
				uni.navigateTo({
					url: '/pages/login/protocol?type=privacy'
				});
			}
		},
		
		// 检查更新
		checkUpdate() {
			uni.showLoading({
				title: '检查中...'
			});
			
			// #ifdef APP-PLUS
			// APP端检查更新
			plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
				uni.hideLoading();
				// 这里可以调用后端接口检查是否有新版本
				// 暂时显示当前版本信息
				uni.showModal({
					title: '版本信息',
					content: `当前版本：${widgetInfo.version}\n\n已是最新版本`,
					showCancel: false
				});
			});
			// #endif
			
			// #ifdef H5 || MP-WEIXIN
			// H5和小程序提示
			uni.hideLoading();
			uni.showModal({
				title: '版本信息',
				content: `当前版本：${this.appVersion}\n\n已是最新版本`,
				showCancel: false
			});
			// #endif
		},
		
		// Logo加载失败处理
		onLogoError() {
			this.logoError = true;
		},
		
		back() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}

.about-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.about-content {
	padding: 40rpx 30rpx;
}

.app-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 0 40rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
}

.app-logo {
	width: 120rpx;
	height: 120rpx;
	border-radius: 24rpx;
	margin-bottom: 30rpx;
	background-color: #f5f5f5;
}

.app-name {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.app-slogan {
	font-size: 26rpx;
	color: #909399;
}

.version-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
}

.version-label {
	font-size: 28rpx;
	color: #606266;
}

.version-value {
	font-size: 28rpx;
	color: #303133;
	font-weight: 500;
}

.contact-info {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
}

.contact-item {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.contact-text {
	font-size: 26rpx;
	color: #606266;
	margin-left: 15rpx;
}

.copyright {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 0;
}

.copyright-text {
	font-size: 24rpx;
	color: #909399;
	margin-bottom: 10rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.feature-content {
	padding: 20rpx;
	max-height: 60vh;
	overflow-y: auto;
}

.feature-item {
	margin-bottom: 30rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.feature-title {
	display: block;
	font-size: 30rpx;
	font-weight: bold;
	color: #303133;
	margin-bottom: 10rpx;
}

.feature-desc {
	display: block;
	font-size: 26rpx;
	color: #606266;
	line-height: 1.6;
}
</style>

